import "@/assets/css/index.scoped.css"
import React, { useRef, useState } from "react"
import Menu from '@/views/Menu'
import { Link } from "react-router-dom"
const Page = () =>
{
	//React官方写法 useState中set参数用驼峰式
	let [coupon, SetCoupon] = useState([])
    let [room, SetRoom] = useState([])
    let [page, SetPage] = useState(1)
    let [hasMore,SethasMore] = useState(true)
    //不能使用state 若不然在输入关键字时会一直刷新
    let keywords = useRef('')

	//React的Hook钩子函数，类似获取值的生命周期
	React.useEffect(() => {
		CouponData()
	},[])

	//请求优惠券列表
	const CouponData = async () => 
	{
		var result = await React.request.post('coupon/index')

		if(result.code == 0)
		{
			React.toast(result.msg, null, 'fail')
			return false
		}

		SetCoupon(result.data)
	}
	
	//轮播图转换
	const Swipers = () => {
		if(coupon.length <= 0)
		{
			return (<></>)
		}

		return(
			<React.UI.Swiper loop className="swiper">
				{
					coupon.map((item, key) => (
						<React.UI.Swiper.Item key={key} onClick={() => React.navigate(`coupon/info?cid=${item.id}`)}>
							<React.UI.Image src={item.thumb_text} width={'100%'} height={'200px'} fit='cover'/>
						</React.UI.Swiper.Item>
					))
				}
			</React.UI.Swiper>
		)
	}

    const Search = (e) => {
        e.preventDefault()
        // console.log(keywords.current.value)
        onRefresh()
    }

    //下拉刷新
    const onRefresh = () => {
        SetPage(1)
        SetRoom([])
        SethasMore(true)
        RoomData()
    }

    //上拉加载
    const loadMore = async () => RoomData()

    //请求房间列表
    const RoomData = async () => {
        var params = {
            keywords: keywords.current.value,
            page
        }

        var result = await React.request.post('room/index', params)

        if(result.code == 0)
        {
            // React.toast(result.msg, null, 'success')
            SethasMore(false)
            return false
        }

        SetPage(++page)
        SethasMore(true)
        SetRoom(room.concat(result.data))
    }

  return(
    <>       
		<Swipers />

        <form className="hotel_search" onSubmit={Search}>
            <input type="text" ref={keywords} placeholder="请输入关键词搜索" />
            {/* <div className="screen_icon">   //筛选的图标
                <img src={require("@/assets/images/screen.png")} alt="" />
            </div> */}
        </form>

        {/* 对房间列表下拉刷新 */}
        <React.UI.PullToRefresh onRefresh={onRefresh}>
            <div className="hotellist">
                {
                    room.map((space, key) => (
                        <div className="item" key={key}>
                            <Link to={`/room/info?rid=${space.id}`}>
                            {/* <div className="collect">
                                <img src={require("@/assets/images/heart.png")} alt="" />
                            </div> */}
                            {/* <div className="type_name">新房特惠</div> */}
                                <div className="images">
                                    <div className="swipers">
                                        <img src={space.thumb_text} alt="" />
                                    </div>
                                    <div className="title">{space.name}</div>
                                </div>
                                <div>
                                    <div className="item_top">
                                        {space.flag_text.length > 0 && space.flag_text.slice(0,4).map((item, ki) => (<span key={ki}>{item}</span>))}
                                    </div>
                                    <div className="item_bot">
                                        <div className="font">
                                            <span className="price">￥{space.price}/晚</span>
                                            <span className="market_price">￥80.00/晚</span>
                                        </div>
                                        <div className="btn">立即预定</div>
                                    </div>
                                </div>
                            </Link>
                        </div>
                    ))
                }
                
            </div>
        </React.UI.PullToRefresh>
        

        <React.UI.InfiniteScroll style={{'padding': '0 18px 18px 18px'}} loadMore={loadMore} hasMore={hasMore} />
        {/* <div className="hotel_more">
            没有更多了
        </div> */}

        {/* <div style={{height: "55px"}}></div> */}

      

        <Menu />

    </>
  )
}

export default Page